<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 在这一行下面写css */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(./img/bg.png) no-repeat 0 0/100%;

        }
        .box{
            width: 100%;
            height: 50px;
            background: #393e39;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: rgba(0,0,0,0.5);
        }
        .right{
            width: 479px;
            height: 16px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-left: 36px;
            line-height: 16px;

        }
        .right a{
            text-decoration: none;
            color: white;
        }
        .left{
            width: 177px;
            height: 16px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-right:36px ;
            color: white;
        }
       .left img{
          width: 30px;
            height: 28px;
        }
        .sex{
            width: 50px;
        }
        .header{

            outline: none;
            display: flex;
            justify-content: center;

        }

        .img{
            width: 500px;
            height: 160px;
            
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto ;
        }
        .text{
              width: 500px;
              height: 40px;
              outline: none;
          }
        .header>input:last-child{
            width: 124px;
            height: 44px;
            outline: none;
        }
        .footer{
            width: 900px;
            height: 300px;
            background: rgba(229, 218, 218, 0.7);
           margin: 70px auto 0;
            border-radius: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }
        .footer ul{
            width: 300px;
            height: 235px;

            font-size: 13px;
            list-style: none;
        }

        ul li{
            margin-top:15px ;
        }
        ul>li:first-child:before{
            content: '1 ';
            color: red;
            font-weight: bold;
        }
        ul>li:nth-child(2):before{
            content: '2 ';
            color: yellow;
            font-weight: bold;
        }
        ul>li:nth-child(2):before{
            content: '2 ';
            color: yellow;
            font-weight: bold;
        }
        ul>li:nth-child(3):before{
            content: '3 ';
            color: blue;
            font-weight: bold;
        }
        ul>li:nth-child(4):before{
            content: '4 ';
            color: black;

        }
        ul>li:nth-child(5):before{
            content: '5 ';
            color: black;
            font-weight: bold;
        }
        ul>li:nth-child(6):before{
            content: '6 ';
            color: black;

        }
        ul>li:nth-child(7):before{
            content: '7 ';
            color: black;

        }
      </style>
</head>

<body >

<!--在这一行下面写html-->

<!--
    作业要求：实现导航条
    备注：打开下面链接可以获取到设计稿相关数据，根据数据来实现导航条
    https://app.mockplus.cn/s/Ar7a65Lxuu4、

 -->

<div class="box">
  <div class="right">
      <a href="#">新闻</a>
      <a href="#">官网</a>
      <a href="#">地图</a>
      <a href="#">直播</a>
      <a href="#">视频</a>
      <a href="#">贴吧</a>
      <a href="#">学术</a>
      <a href="#">更多</a>
</div>
    <div class="left">
        <span class="sex">设置</span>
        <img src="img/header.png" />
        <span>lexSeven</span>
    </div>
</div>

<div class="img">
    <img src="img/logo.png"  height="70" width="180"/>
</div>
<div class="header">
    <input type="text" id="input" src="" class="text" >
    <input type="button" id="btn" value="开心一下">
</div>
<div class="footer">

    <img src="img/banner.png" height="250" width="500"/>

<ul>
    <li>31省区市新增确诊20例 本土6例488万</li>
    <li>中国成功实施反导拦截技术试验热471万</li>
    <li>CGTN:坚决反对英国吊销其落地许可455万</li>
    <li>东部战区回应美军舰穿航台湾海峡439万</li>
    <li>拜登发表上任后首份外交政策演讲423万</li>
    <li>上海新增1例本地确诊病例409万</li>
    <li>亚那终止与台湾设立办公室协议394万</li>
</ul>
</div>
<script>
    var input01 = document.getElementById("input");
    var btn = document.getElementById("btn");
    btn.onclick = function (){

      window.location.href = 'http://www.baidu.com/s?wd='+input01.value;
    };
</script>
</body>

</html>